<template>
    <div>
        <div><h1 style="color: midnightblue">{{title}}</h1></div>
        <span>
      <div id="c1" class="hello"></div>
      <div id="mountNode" class="hello"></div>
    </span>
    </div>
</template>

<script>
    import * as G2 from '@antv/g2';
    export default {
        name: "LinkChart",
        data(){
            return{
                title:'二维码、短链接点击量排名前十',
                linkColumnChart:{
                    container:'c1',
                    width:600,
                    height:300
                },
                linkBarChart:{
                    container:'mountNode',
                    size:{'width':500,'height':300},
                    data:[
                        {
                            link: '短链接Num1',
                            click: 18203
                        }, {
                            link: '短链接Num2',
                            click: 23489
                        }, {
                            link: '短链接Num3',
                            click: 29034
                        }, {
                            link: '短链接Num4',
                            click: 104970
                        }, {
                            link: '短链接Num5',
                            click: 131744
                        },{
                            link: '短链接Num6',
                            click: 18100
                        },{
                            link: '短链接Num7',
                            click: 17203
                        },{
                            link: '短链接Num8',
                            click: 16203
                        },{
                            link: '短链接Num9',
                            click: 15503
                        },{
                            link: '短链接Num10',
                            click: 14803
                        },
                    ]
                }
            }
        },
        methods:{
            test:function () {

              this.getRequest("/link/top").then((resp) => {
               const data = resp;

              // Step 1: 创建 Chart 对象
                const chart = new G2.Chart({
                    container: this.linkColumnChart.container, // 指定图表容器 ID
                    width : this.linkColumnChart.width, // 指定图表宽度
                    height : this.linkColumnChart.height // 指定图表高度
                });
                // Step 2: 载入数据源
                chart.source(data);
                // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
                chart.interval().position('id*num').color('num')
                // Step 4: 渲染图表
                chart.render();
              })
            },
            linkBar:function () {
                let data = this.linkBarChart.data;
                let chart = new G2.Chart({
                    container: this.linkBarChart.container,
                    width:this.linkBarChart.size.width,
                    height:this.linkBarChart.size.height
                });
                chart.source(data);
                chart.axis('link', {
                    label: {
                        offset: 12
                    }
                });
                chart.coord().transpose();
                chart.interval().position('link*click');
                chart.render();
            }
        },
        mounted() {
            this.test();
            this.linkBar();
        },

        //设置背景颜色
        beforeCreate () {
            document.querySelector('body').setAttribute('style', 'background:#333')
        },
        beforeDestroy () {
            document.querySelector('body').removeAttribute('style')
        }
    }
</script>

<style scoped>
.hello{
    background-color: #333;
    }
</style>